<template>
    <div>
        <el-form :model="ruleForm" 
        status-icon :rules="rules" 
        ref="ruleForm" 
        label-width="100px" 
        class="demo-ruleForm">
            <el-form-item label="手机号码" prop="mobile">
                <el-input v-model="ruleForm.mobile" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
            </el-form-item>
        
            <el-form-item>
                <el-button type="primary" class="login-sub" style="background:#892700" @click="loginTodo">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    import {signinAjax} from "@/api"
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      return {
        ruleForm: {
            mobile:'',
            password: '',
        },
        rules: {
            mobile:[
                {required: true, message: '请输入手机号码', trigger: 'blur' },
                {
                    validator:(rule,value,callback)=>{
                        var pass = /^1(3|4|6|7|8|9)\d{9}$/
                        if(pass.test(value)){
                            callback()
                        }else{
                            callback(new Error("请输入正确的手机号"))
                        }
                    },trigger:"blur"
                }  
            ],
            password: [
                { validator: validatePass, trigger: 'blur' },
                 {
                        validator:(rule, value, callback)=>{
                            var passReg = /^[A-Za-z0-9]{4,12}$/
                            if(value.length<4){
                                callback(new Error("密码长度至少4位"));
                            }else if(value.length>12){
                                callback(new Error("密码长度最多12位"));
                            }else if(!passReg.test(value)){
                                callback(new Error("请输入正确的密码"));
                                
                            }else{
                                 callback()
                            }
                        },
                        trigger:'change'
                    }
            ],
        }
      };
    },
   methods:{
       loginTodo(){
           this.$refs.ruleForm.validate(valid=>{
               if(valid){
                   console.log(this.ruleForm)
                   signinAjax(this.ruleForm)
                   .then(res=>{
                       console.log(res)
                       sessionStorage.setItem("token",res.token)
                       localStorage.setItem("mobile",this.ruleForm.mobile)
                       this.$router.push({name:"index"})
                   })
               }else{
                   return false
               }
           })
       }
   },
   mounted(){
       if(localStorage.getItem("mobile")){
           this.ruleForm.mobile = localStorage.getItem("mobile")
       }
   }
  }
</script>

<style lang="scss" scoped>
    .demo-ruleForm{
        width: 350px;
        margin-top: 25px;
        text-align: center;
       
    }
    .login-sub{
       border: 0;
    }
</style>